<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <h3>账户信息</h3>
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 2 }" :wrapper-col="{ span: 14 }">
        <a-form-model-item label="用户名" prop="name">
          <a-input v-model="form.name" style="width: 500px" />
        </a-form-model-item>
        <a-form-model-item label="密码" prop="pwd">
          <a-input v-model="form.pwd" style="width: 500px" />
        </a-form-model-item>

        <div class="btn">
          <a-button type="primary" :loading="btnLoading" @click="onSubmit"> 保存 </a-button>
        </div>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { saveSetting, getSetting } from '@/api/purchase/purchase'

export default {
  data() {
    return {
      form: {
        name: '',
        pwd: '',
      },

      rules: {
        name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },

      btnLoading: false,
    }
  },
  created() {
    this.getSetting()
  },
  methods: {
    // 获取配置数据
    async getSetting() {
      this.btnLoading = true
      const res = await getSetting()
      this.btnLoading = false
      console.log(res)
      if (res.code == 0) {
        this.form = res.data
      }
    },
    onSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.btnLoading = true
          const res = await saveSetting(this.form)
          this.btnLoading = false

          if (!res.code) {
            this.$message.success('保存成功！')
          } else {
            this.$message.error(res.msg)
          }
        } else {
          return false
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
h3 {
  font-weight: bold;
}

.btn {
  padding-top: 30px;
  text-align: center;
  border-top: 1px solid #d9d9d9;
}
</style>
